<template>
  <div class="sign-name">
    <div class="signature" style="" ref="signature">

    </div>
    <div style="text-align: center">
      <a class="sure" @click="signName">确定</a>
      <a class="cancle" @click="cancleSign">取消</a>
    </div>
    <div class="up-box">
      <div @click="uploadImg" style="text-align: center">去上传</div>
    </div>
    <img :src='imgSrc'>
    <div id="canvas-box"></div>
  </div>
</template>
<script>
  import API from '../api/api';
  import untils from '../assets/untils/untils'

  export default {
    data() {
      return {
        list: [],
        signPen: '',
        imgSrc: ''
      }
    },
    mounted() {

      let _this = this;
      let src = '/static/jquery.min.js';
      untils.loadAsycJs('JQ', src, () => {
        let src = '/static/jSignature.min.noconflict.js';
        untils.loadAsycJs('JSIGN', src, () => {
          _this.signPen = $(_this.$refs.signature).jSignature('init', {
            height: '100%',
            width: '100%',
            color: "#000",
            lineWidth: 2,
            backgroundColor: '#f1f1f1'
          });
        })

      });

      untils.showPdf({elementId:'canvas-box',url:'/static/ZJ.pdf',scale:.7,showLoading:true})
    },

    methods: {
      signName() {
        var dataUrl = this.signPen.jSignature('getData');
        // console.log(dataUrl);
        var _this = this;
        // _this.imgSrc=dataUrl
        untils.zipImg(dataUrl, {
          width: 160,
          height: 117,
          quality: 1
        }, function (url) {
          console.log(url);
          _this.imgSrc = url
        });
      },
      cancleSign() {
        this.signPen.jSignature('reset')
      },
      uploadImg() {
        this.$router.push({name: 'test'})
      }

    }


  }
</script>
<style>
  .sign-name {
    position: absolute;
    width: 100%;
    left: 0;
    top: 30px;
  }

  .signature {
    width: 100%;
    height: 500px;
    background: #ffffff;

  }

  .signature canvas {
    width: 100%;
    height: 500px !important;
    background: #ffffff !important;
  }

  .up-box {
    position: relative;
  }

  #file {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
  }
  #canvas-box{
    width: 100%;
    overflow: hidden;
  }
  #canvas-box canvas{
    width: 105%;
    position: relative;
    left: -10px;

  }
</style>
